<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style type="text/css">
  	*{margin:0;padding:0}

	li{list-style:none}

	img{vertical-align:top;border:none}

	html,body,#app,.el-container{height:100%;}
	.el-header{background-color: rgb(64, 72, 80);}
	.el-aside{background-color: rgb(84, 92, 100);}
	.logo-img{height:40px;}
	.logo-div{height:40px;margin-top:10px;line-height: 40px;font-size:20px;color:white;}
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 14px;
	    opacity: 0.75;
	    line-height: 150px;
	    margin: 0;
	  }

	  .el-carousel__item:nth-child(2n) {
	     background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	     background-color: #d3dce6;
	  }
  </style>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-container>
	  <el-header>
	  		<div class="logo-div">
	  			<img class="logo-img" src="./logo.png">
	  			测试标题
	  		</div>
	  </el-header>
	  <el-container>
	    <el-aside width="200px">
	    	<el-menu
		      default-active="2"
		      class="el-menu-vertical-demo"
		      @open="handleOpen"
		      @close="handleClose"
		      background-color="#545c64"
		      text-color="#fff"
		      active-text-color="#ffd04b">
		      <el-submenu index="1">
		        <template slot="title">
		          <i class="el-icon-location"></i>
		          <span>导航一</span>
		        </template>
		        <el-menu-item-group>
		          <template slot="title">分组一</template>
		          <el-menu-item index="1-1">选项1</el-menu-item>
		          <el-menu-item index="1-2">选项2</el-menu-item>
		        </el-menu-item-group>
		        <el-menu-item-group title="分组2">
		          <el-menu-item index="1-3">选项3</el-menu-item>
		        </el-menu-item-group>
		        <el-submenu index="1-4">
		          <template slot="title">选项4</template>
		          <el-menu-item index="1-4-1">选项1</el-menu-item>
		        </el-submenu>
		      </el-submenu>
		      <el-menu-item index="2">
		        <i class="el-icon-menu"></i>
		        <span slot="title">导航二</span>
		      </el-menu-item>
		      <el-menu-item index="3" disabled>
		        <i class="el-icon-document"></i>
		        <span slot="title">导航三</span>
		      </el-menu-item>
		      <el-menu-item index="4">
		        <i class="el-icon-setting"></i>
		        <span slot="title">导航四</span>
		      </el-menu-item>
		    </el-menu>
	    </el-aside>
	    <el-main>
	    	  <el-tabs v-model="activeName" @tab-click="handleClick">

			    <el-tab-pane label="表格" name="first">
			    	<el-table
				      :data="tableData"
				      style="width: 100%">
				      <el-table-column
				        prop="date"
				        label="日期"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="name"
				        label="姓名"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="address"
				        label="地址">
				      </el-table-column>
				    </el-table>
			    </el-tab-pane>

			    <el-tab-pane label="表单" name="second">
			    	<el-form ref="form" :model="form" label-width="80px">
					  <el-form-item label="活动名称">
					    <el-input v-model="form.name"></el-input>
					  </el-form-item>
					  <el-form-item label="活动区域">
					    <el-select v-model="form.region" placeholder="请选择活动区域">
					      <el-option label="区域一" value="shanghai"></el-option>
					      <el-option label="区域二" value="beijing"></el-option>
					    </el-select>
					  </el-form-item>
					  <el-form-item label="活动时间">
					    <el-col :span="11">
					      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
					    </el-col>
					    <el-col class="line" :span="2">-</el-col>
					    <el-col :span="11">
					      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
					    </el-col>
					  </el-form-item>
					  <el-form-item label="即时配送">
					    <el-switch v-model="form.delivery"></el-switch>
					  </el-form-item>
					  <el-form-item label="活动性质">
					    <el-checkbox-group v-model="form.type">
					      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
					      <el-checkbox label="地推活动" name="type"></el-checkbox>
					      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
					      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
					    </el-checkbox-group>
					  </el-form-item>
					  <el-form-item label="特殊资源">
					    <el-radio-group v-model="form.resource">
					      <el-radio label="线上品牌商赞助"></el-radio>
					      <el-radio label="线下场地免费"></el-radio>
					    </el-radio-group>
					  </el-form-item>
					  <el-form-item label="活动形式">
					    <el-input type="textarea" v-model="form.desc"></el-input>
					  </el-form-item>
					  <el-form-item>
					    <el-button type="primary" @click="onSubmit">立即创建</el-button>
					    <el-button>取消</el-button>
					  </el-form-item>
					</el-form>
			    </el-tab-pane>


			    <el-tab-pane label="打开层测试" name="third">
			    	<el-row>
  						<el-button>默认按钮</el-button>
					 	<el-button type="primary"  @click="dialogVisible = true">走马灯</el-button>
					 	<el-button type="success" @click="dialogVisible1 = true">时间轴</el-button>
					  	<el-button type="info">信息按钮</el-button>
					  	<el-button type="warning">警告按钮</el-button>
					  	<el-button type="danger">危险按钮</el-button>
					</el-row>
			    </el-tab-pane>


			    <el-tab-pane label="走马灯" name="fourth">
			    	
			    </el-tab-pane>
			  </el-tabs>
	    </el-main>
	  </el-container>
</el-container>



  	<el-dialog
	  title="提示"
	  :visible.sync="dialogVisible1"
	  width="1500px"
	  :before-close="handleClose">
	      	<iframe style="height:600px;width:100%;" src="http://www.ibloger.net/assets/demos/jquery.timeline/2/index.html#/12"/></iframe>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
	  </span>
	</el-dialog>

  	<el-dialog
	  title="提示"
	  :visible.sync="dialogVisible"
	  width="1000px"
	  :before-close="handleClose">
	 		<el-carousel height="500px" indicator-position="outside">
			    <el-carousel-item v-for="item in images" :key="item.url">
			       <img style="width:100%;" :src="item.url"/>
			    </el-carousel-item>
		  	</el-carousel>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
	  </span>
	</el-dialog>
  </div>



</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
        	visible: false,
	        dialogVisible1: false,
	        dialogVisible: false,
        	activeIndex: '1',
        	activeIndex2: '1',
        	activeName: 'third',
        	tableData: [{
	            date: '2016-05-02',
	            name: '王小虎',
	            address: '上海市普陀区金沙江路 1518 弄'
          	}, {
	            date: '2016-05-04',
	            name: '王小虎',
	            address: '上海市普陀区金沙江路 1517 弄'
          	}, {
	            date: '2016-05-01',
	            name: '王小虎',
	            address: '上海市普陀区金沙江路 1519 弄'
          	}, {
	            date: '2016-05-03',
	            name: '王小虎',
	            address: '上海市普陀区金沙江路 1516 弄'
          	}],
          	form: {
	          	name: '',
	          	region: '',
	          	date1: '',
	          	date2: '',
	          	delivery: false,
	          	type: [],
	         	resource: '',
	          	desc: ''
	        },
	        images: [
	        	{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535008925885&di=bddd1ccb2111037237b4713439f7deca&imgtype=0&src=http%3A%2F%2Fi3.bbs.fd.zol-img.com.cn%2Ft_s1200x5000%2Fg4%2FM01%2F07%2F04%2FCg-4WlKpdiGIGK01AAPnwSfQC5UAAOb4wP2Nu4AA-fZ903.jpg"},
	        	{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535008947441&di=8eeadc54309863cbecb3fac899dde494&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D4038449463%2C2571335014%26fm%3D214%26gp%3D0.jpg"},
	        	{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535008925886&di=e35fc9376cebeb0a7b4870bd78641502&imgtype=0&src=http%3A%2F%2Fold.bz55.com%2Fuploads%2Fallimg%2F160319%2F139-160319112249.jpg"},
	        	{url:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1534999819&di=e471245de0a12fb46a74cf9d38bff2a3&src=http://pic1.win4000.com/wallpaper/a/56efbc0d6b66e.jpg"}
	        ]	
        }
      },
      methods: {
	      handleSelect(key, keyPath) {
	        console.log(key, keyPath);
	      },
	      handleClick(tab, event) {
	        console.log(tab, event);
	      },
	      onSubmit() {
	        console.log('submit!');
	      },
	      handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	      }
	    }
    })
  </script>
</html>